<style scoped>
.sku_outer{display: flex;flex-direction: column;max-height: 500px;padding: 10px;position: relative;}
.object_info{padding-bottom: 10px;}
.object_info>img{width: 100px;}
.object_info>.content{padding-left: 10px;}
.object_info>.content .money{font-size: 1.2em;color: #ff9200;}
.group{overflow-y: scroll;}
.sku_group_row{padding-top: 5px;}
.sku_group_row h4{font-weight: bold;}
.sku_group_row .item{min-width: 4em;margin: 0 0 5px 8px;text-align: center;}
.sku_footer{padding: 10px 10px 0;}
.sku_footer>.flex{height: 32px;border-radius: 16px;overflow: hidden;}
.sku_footer>.flex>*{background-color: #ff9200;color: #fff;line-height: 32px;text-align: center;}
.sku_footer>.flex>.buy{background: #d62e2e;}
.sku_footer>.flex>.ok{background: var(--color-primary);}
</style>
<template>
  <van-popup v-model:show="is_show" round position="bottom" safe-area-inset-bottom closeable teleport="body">
    <div class="sku_outer">
      <div class="object_info flex" v-show="sku.head_img">
        <img-referrer :src="sku.head_img" />
        <div class="content max">
          <p class="money">{{sku.final_price}}</p>
          <p class="num" v-if="num!==false">
            <van-stepper v-model="num" min="1" />
          </p>
        </div>
      </div>
      <div class="group max">
        <div v-for="(row,i) in group" class="sku_group_row">
          <h4>{{row.title}}</h4>
          <div class="flex" style="flex-wrap: wrap;">
            <van-button class="item" v-for="(v,j) in row.children" :disabled="v.ban" :type="value_arr[i]==j?'primary':'default'" hairline round size="small" @click="click(i,j)" >{{v.title}}</van-button>
          </div>
        </div>
      </div>
      <div class="sku_footer">
        <div class="flex">
          <div class="ok max" @click="submit">确定</div>
        </div>
      </div>
    </div>

  </van-popup>
</template>

<script>


import {reactive} from "vue";
import {s94_event} from "@/js/s94_tool.js";
import ImgReferrer from "@/components/widget/ImgReferrer.vue";

const _this = reactive({
  is_show: false,

  group: [],
  list: [],
  switch_stock: false,
  min_price: -1,
  num: 1,

  sku: {},
  value_arr: [],
  mode: ["add_cart","buy"],

  callback: function (){},
  fail(){}
})

function ban_button(){
  _this.group.forEach((row, i)=>{
    let value_arr = [].concat(_this.value_arr);
    row.children.forEach((v, j)=>{
      value_arr[i] = j;
      let str = value_arr.join('_').replaceAll('*',"\\d+");
      let reg = new RegExp(str);
      v.ban = !pass_sku(reg);
    })
  })
}
function pass_sku(reg){
  let res = null;
  _this.list.some(row=>{
    if (typeof reg === 'function' && !reg(row)) return false;
    if (reg instanceof RegExp && !row.group_key.match(reg)) return false;
    let has_stock = !_this.switch_stock || row.stock > 0;
    if (!has_stock) return false;
    let gt_price = _this.min_price<0 || row.final_price > _this.min_price;
    if (!gt_price) return false;
    res = row;
    return true;
  })
  return res;
}

export function select_sku(group, list, switch_stock, sku_id, num, min_price){

  _this.group = group;
  _this.list = list;
  _this.switch_stock = !!switch_stock;
  _this.num = num || 1;
  _this.min_price = min_price || -1;

  _this.value_arr = [];
  let sku = null;
  if (sku_id > 0){
    sku = pass_sku((row)=>{return (row.id==sku_id);});
  }
  _this.sku = sku || pass_sku((row)=>{return row.default==1;}) || pass_sku() || {};
  if (_this.sku.group_key){
    _this.value_arr = _this.sku.group_key.split('_');
  }else {
    _this.group.forEach(row=>{
      _this.value_arr.push('*');
    })
  }

  ban_button();
  _this.is_show = true;
  return new Promise((resolve, reject)=>{
    _this.callback = resolve;
    _this.fail = reject;
  })
}
select_sku._this = _this;
select_sku.hide = function(){
  _this.is_show = false;
}

s94_event('router.after', ()=>{
  _this.is_show = false;
})

export default {
  components: {ImgReferrer},
  props: {},
  emits: ['submit'],
  data(){
    return _this
  },
  methods: {
    click(i,j){
      let v = this.value_arr[i] == j ? '*' : j;
      let sku_group = this.group;
      let row = sku_group[i].children[j];
      if (v != '*' && row.ban) return;

      this.value_arr[i] = v;
      ban_button();
      // 每项都选择后，修改sku
      if (!~this.value_arr.indexOf('*')){
        let key = this.value_arr.join('_');
        this.list.some(row=>{
          if (row.group_key == key) {
            this.sku = row;
            return true;
          }
        })
      }
    },
    submit(){
      this.callback(this.sku);
      this.is_show = false;
    }
  },
  mounted() {

  }
}
</script>